<!-- 电子签章配置左侧联级地区公司区域 -->
<template>
  <div class="cascadeArea">
    <div class="signTitle">电子签章配置单位</div>
    <div class="signUnits">
      <el-tree
        ref="unitRef"
        :data="unitData"
        :expand-on-click-node="false"
        highlight-current
        :default-expanded-keys="[10000000]"
        node-key="orgId"
        accordion
        :empty-text="loadingTitle"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </div>
  </div>
</template>

<script>
import { queryOrgApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'

export default {
    name: 'CascadeArea',
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'orgName'
            },
            loadingTitle: '加载中，请稍候',
            unitData: [], // 转化为树形结构的数据
            unitList: [] // 建设单位接口返回的原始数据
        }
    },
    created() {
        this.queryOrg()
    },
    methods: {
        // 查询建设单位
        queryOrg() {
            queryOrgApi().then(res => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.unitList = res.data
                this.unitData = this.transTree(res.data, res.data[0].parentOrgId)
                console.log(this.unitData, 'this.unitData')
            }).catch(() => {
                this.loadingTitle = '加载异常，请刷新页面'
            })
        },
        handleNodeClick(data) {
            this.$emit('checkUnit', data.orgId)
        },
        // 转树形
        transTree(arr, parentOrgId) {
            const tree = []
            arr.forEach(item => {
                if (item.parentOrgId === parentOrgId) {
                    const children = this.transTree(arr, item.orgId)
                    if (children.length) {
                        item.children = children
                    }
                    tree.push(item)
                }
            })
            return tree
        }
    }
}
</script>

<style lang="scss" scoped>
.cascadeArea {
    // margin-left: 20px;
    margin-top: 30px;
}

.signTitle {
    margin-left: 30%;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.signUnits {
    margin-top: 20px;
    font-size: 14px;
    margin-left: 0;
}
::v-deep .el-tree-node__label {
    font-size: 12px;
}
</style>
